<style lang="scss">
.z-drag-render--selected {
  border: 1px solid #3ba2f4;
}
</style>

<template>
  <div style="width: 100%; height: 100%; color: #fff"
       :style="item.conStyle"
       v-loading="!item.data.reload"
       :class="{'z-drag-render--selected': item.data.selected}"
  >
<!--    {{item}}-->
<!--    {{item.data.widget}}-->
<!--    {{iStyle}}-->
    <template v-if="item.data.widget === 'z-chart'">
      <z-chart
          ref="com"
          v-if="item.data.reload"
          :style="getStyle(item)" :option="item.data.widgetConfig.option"></z-chart>
    </template>
    <template v-else-if="item.data.widget === 'ZDragRichText'">
      <template v-if="isPreview">
        <div
            v-if="item.data.dataset"
            v-html="parseHtml(item.data.dataset)"
           ></div>
      </template>
      <template v-else>
        <component :is="item.data.widget"
                   ref="com"
                   v-bind="item.data.widgetConfig"></component>
      </template>
    </template>
    <template v-else>
      <component :is="item.data.widget"
                 ref="com"
                 v-bind="item.data.widgetConfig"></component>
    </template>
  </div>
</template>

<script>

import {INIT_HEIGHT, INIT_WIDTH} from "@example/views/drag/const";

export default {
  name: 'ZDragRender',
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    isPreview: Boolean,
    iStyle: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    getStyle(item) {
      let width = item.data.w ?? INIT_WIDTH
      let height = item.data.h ?? INIT_HEIGHT
      return {
        width: width + 'px',
        height: height + 'px'
      }
    },
    setItemData(k, v) {
      this.item.data[k] = v
    },
    getCom() {
      return this.$refs.com
    },
    parseHtml(json) {
      let obj = ZY.JSON5.parse(json)
      return  obj.html
    }
  }
}
</script>
